<script lang="ts" setup>
import type { ColorItem } from '@/shared/colorList'
import { computed } from 'vue'

type Props = {
  angle: number
  colorList: ColorItem[]
}

const props = withDefaults(defineProps<Props>(), {
  colorList: () => []
})

const colorValStr = computed(() => props.colorList.map(item => item.value).join(','))

</script>

<template>
  <div class="code-container">
    <div class="code">
      <span style="color: #FFCC00">-webkit-background-clip</span>: text; <br>
      <span style="color: #FFCC00">-webkit-text-fill-color</span>: transparent; <br>
      <span style="color: #FFCC00">background</span>:
      <span style="color: #82AAFF">linear-gradient</span>(<span style="color: #F78C6C">
        {{ angle }}deg</span>, {{ colorValStr }});
    </div>
    <div class="copy">
      <div class="copy-btn">
        <span>Copy The CSSRules</span>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.code-container {
  width: 440px;
  margin-bottom: 20px;
  background-color: #292D3E;
  border-radius: 14px;
  color: rgb(156, 163, 175);
  font-family: monospace, sans-serif;
  margin-top: 20px;

  .code {
    padding: 40px;
  }

  .copy {
    background-color: #222634;
    padding: 12px 0;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    display: flex;
    justify-content: center;
  }

  .copy-btn {
    display: flex;
    align-items: center;
    background-color: transparent;
    cursor: pointer;

    .btn-icon {
      width: 24px;
      height: 24px;
    }
  }
}
</style>